<template>
  <el-empty :image-size="200" v-if="props.contentList===null ? true : false" />
  <div v-show="props.status === 'second' ? true : false">
    <div style="border: 1px #eee solid; margin-bottom: 10px"></div>
    <div style="color: #a0a0a0; display: flex">
      <div class="cho" :class="{ chot: chot === 0 ? true : false }" @click="chooseItem(0)">
        按时间排序<i class="iconfont icon-icon-test40"></i>
      </div>
      <div class="cho" :class="{ chot: chot === 1 ? true : false }" @click="chooseItem(1)">
        按访问量<i class="iconfont icon-icon-test40"></i>
      </div>
      <div class="cho" :class="{ chot: chot === 2 ? true : false }" @click="chooseItem(2)">
        按收藏量<i class="iconfont icon-icon-test40"></i>
      </div>
    </div>
    <div style="border: 1px #eee solid; margin: 10px 0"></div>
  </div>
  <div style="padding: 5px; width: 100%">
    <div v-for="item of props.contentList" :key="item.id" class="content" @click="toDetail(item)">
      <div>
        <img :src="item.firstPicture" alt="首图" />
      </div>
      <div style="margin-left: 10px">
        <div style="height: 25px">{{ titleUtil.title(item.title) }}</div>
        <div style="height: 50px">
          <p>{{ item.description }}</p>
        </div>
        <div style="height: 25px">
          <ul>
            <li>
              <div class="tag1 tag" v-if="item.model === 0">
                {{ titleUtil.model(item.model) }}
              </div>
              <div class="tag2 tag" v-if="item.model === 1">
                {{ titleUtil.model(item.model) }}
              </div>
              <div class="tag3 tag" v-if="item.model === 2">
                {{ titleUtil.model(item.model) }}
              </div>
            </li>
            <li>在&nbsp{{ titleUtil.formatDateToYYYYMMDD(item.createTime) }}&nbsp时发布&nbsp·</li>
            <li>&nbsp{{ titleUtil.numberTo(item.historyPeopleCount) }}&nbsp 阅读&nbsp·</li>
            <li>&nbsp{{ titleUtil.numberTo(item.like) }}&nbsp点赞&nbsp·</li>
            <li>&nbsp{{ titleUtil.numberTo(item.collect) }}&nbsp收藏</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import store from '@/store'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const props = defineProps({
  contentList: {
    type: Object,
    required: true,
    default: () => ({}) // 提供一个安全的默认值
  },
  status: {
    type: String,
    required: true,
    default: () => 'first'
  }
})

const router = useRouter()
const chot = ref(0)
const emit = defineEmits(['sort'])

const toDetail = (item) => {
  console.log('传递前', item)
  store.dispatch('setBlogItem', item)
  router.push('/blogdetail')
}

const chooseItem = (status) => {
  chot.value = status
  emit('sort', status)
}
</script>

<style scoped lang="scss">
.content {
  padding: 0 5px;
  display: flex;
  margin-bottom: 15px;
}

img {
  width: 180px;
  height: 100px;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  float: left;
  font-size: 14px;
  color: #a7a7a7;
  height: 25px;
}

.tag {
  padding: 2px 4px;
  margin-right: 10px;
  border-radius: 2px;
  font-size: 12px;
}

.tag1 {
  background: rgba(255, 179, 179, 0.297);
  color: #ff5100;
}
.tag2 {
  background: rgba(255, 249, 179, 0.297);
  color: #ffae00;
}
.tag3 {
  background: rgba(179, 255, 255, 0.297);
  color: #0033ff;
}

.cho {
  width: 120px;
  font-weight: 400;
  font-size: 14px;
}

.cho:hover {
  cursor: pointer;
}
.chot {
  color: #ff5100;
}
</style>
